<template>
  <div id="time-table"></div>
</template>

<script>
  import { Column } from '@antv/g2plot';
  export default {
    name: "TimeTable",
    mounted() {
      const data = [
        {
          time: '0-15\'',
          frequency: 3,
          type:'进球'
        },
        {
          time: '15-30\'',
          frequency: 6,
          type:'进球'
        },
        {
          time: '30-45\'+',
          frequency: 4,
          type:'进球'
        },
        {
          time: '45-60\'',
          frequency: 4,
          type:'进球'
        },
        {
          time: '60-75\'',
          frequency: 4,
          type:'进球'
        },
        {
          time: '75-120\'+',
          frequency: 4,
          type:'进球'
        },
        {
          time: '0-15\'',
          frequency: 3,
          type:'射门'
        },
        {
          time: '15-30\'',
          frequency: 2,
          type:'射门'
        },
        {
          time: '30-45\'+',
          frequency: 2,
          type:'射门'
        },
        {
          time: '45-60\'',
          frequency: 1,
          type:'射门'
        },
        {
          time: '60-75\'',
          frequency: 2,
          type:'射门'
        },
        {
          time: '75-120\'+',
          frequency: 3,
          type:'射门'
        },
      ];
      const columnPlot = new Column('time-table', {
        data,
        xField: 'time',
        yField: 'frequency',
        isStack: true,
        seriesField: 'type',
        color:['#C3EADF','#3FA27F'],

        xAxis:{
          tickLine:null,
          label:{
            style:{
              fontSize:20,
              fontWeight:'bold',
              fill:'rgba(101, 111, 115, 0.75)'
            }
          },
        },
        yAxis:{
          grid:null,
          label:null,
          min:0,
          max:10
        },
        legend:false,
        meta: {
          time: {
            alias: '类别',
          },
          frequency: {
            alias: '成功次数',
          },
        },
        minColumnWidth: 90,
        maxColumnWidth: 90,
        interactions: [{ type: 'active-region', enable: false }],
      });
      columnPlot.render();
    }
  }
</script>

<style scoped>
  #time-table {
    width: 100%;
    height: 100%;
  }
</style>